<as-split direction="vertical" unit="pixel" [disabled]="true" gutterSize="0">
  <as-split-area class="flex-fixed" [size]="40">
    <form nz-form se-container="1" size="compact" gutter="32" [labelWidth]="null">
      <se label="所属类目" line>
        <tag-select>
          <nz-tag *ngFor="let i of categories; let idx = index" nzMode="checkable" [nzChecked]="i.value"
            (nzCheckedChange)="changeCategory($event, idx,i.text)">
            {{ i.text }}
          </nz-tag>
        </tag-select>
      </se>
      <se label="其它选项">
        <div class="ant-form ant-form-inline">
          <nz-form-item class="mb-md">
            <nz-form-label nzFor="rate">招聘公司</nz-form-label>
            <nz-form-control>
              <nz-select [(ngModel)]="name" name="name" nzAllowClear="true" [nzPlaceHolder]="'不限'" [nzShowSearch]="true"
                style="width: 200px">
                <nz-option *ngFor="let child of listData" [nzLabel]="child.text" [nzValue]="child.text"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>

          <button nz-button (click)="serach()" [nzType]="'primary'">
            <i nz-icon nzType="search"></i>
            <span>搜索</span>
          </button>

          <button nz-button (click)="reset()" [nzType]="'primary'">
            <i nz-icon nzType="reload"></i>
            <span>重置</span>
          </button>
        </div>
      </se>

    </form>

  </as-split-area>
  <as-split-area [size]="'*'">
    <nz-spin [nzSpinning]="spinning">
      <nz-card [nzHoverable]="true" [nzBordered]="false">

        <div style='height: 100%;overflow-x: hidden;overflow-y: auto'>
          <sv-container *ngFor="let data of tableData" size="large" title="{{data.title}}">
            <sv label="招聘类型">{{data.type}}</sv>
            <sv label="招聘企业">{{data.enterprise}}</sv>
            <sv label="发布时间">{{data.createdTime |date:'yyyy-MM-dd HH:mm:ss'}}</sv>
            <sv label="内容要求">{{data.content}}</sv>
            <nz-divider></nz-divider>
          </sv-container>
        </div>
      </nz-card>
    </nz-spin>
  </as-split-area>
</as-split>
